<template>
  <a-modal class="common-modal" title="{{$t('video.preview')}}" :footer="null"  :width="800" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="loading">
      <div style="width: 800px; height: 450px;"> 
        <!-- @play="handleFullScreen" -->
        <video v-if="videoSrc" controls  
          style="width: 800px; height: 450px; object-fit: fill"
          autoplay
          :src="videoSrc" /> 
      </div>
        
    </a-spin>
  </a-modal>
</template>

<script setup name="operateEmpModal">
import { ref  } from 'vue' 
// import dayjs from 'dayjs'
import axios from '@/utils/request'
let videoSrc= ref('')
let visible = ref(false) 
let loading = ref(false)  
let timer = ref()
const open = async (beatId, videoUrl) => {  
  visible.value = true
  if(videoUrl) {
    loading.value = false
    videoSrc.value = videoUrl
  } else { 
    await getUrl(beatId) 
  }
}  
// const isOutTimeUrl = (videoUrl) => { 
//   let ss = videoUrl.split('?')[1]?.split('&')
//   let obj = {}
//   ss.forEach(i=> {
//     let el = i?.split('=')
//     obj[el[0]] = el[1]
//   })
//   let nowD = dayjs(new Date())
//   // let nowD = dayjs('2023-07-03 17:00:00')
  
//   console.log(dayjs(obj.Expires).format('YYYY-MM-DD HH:mm:ss'), nowD.diff(dayjs(obj.Expires), 'second') > 2 * 60 * 60 * 1000);
//   // if(nowD.diff(obj.Expires) ) 
//   return nowD.diff(dayjs(obj.Expires), 'second') > 2 * 60 * 60 * 1000
// }
const getUrl = (id) => {
  clearInterval(timer.value)
  loading.value = true  
  timer.value = setInterval(async ()=> {
    let res = await axios.postAction('/api/monitor/beat/getVideoUrl', [id])
    if(res.success) {
      videoSrc.value = Array.isArray(res.data) ?  res.data[0] : res.data
      if(videoSrc.value) { 
        loading.value = false
        clearInterval(timer.value)
      }
    }
  }, 5000)
  
}
// const handleFullScreen =(e) =>{
//   fullScreen(e.target);
// }
// const fullScreen = (ele) => { 
//   if (ele.requestFullscreen) {
//     ele.requestFullscreen()
//   } else if (ele.mozRequestFullScreen) {
//     ele.mozRequestFullScreen()
//   } else if (ele.webkitRequestFullScreen) {
//     ele.webkitRequestFullScreen()
//   }
// }

const handleCancel = () => { 
  clearInterval(timer.value)
  visible.value = false
  videoSrc.value = ''
  loading.value = false
} 
defineExpose({
  open
})

</script>